window.addEventListener('load', function () {
    // 用户名验证
    let username = document.querySelector('[name=username]');
    username.addEventListener('change', verifyName);
    function verifyName() {
        // 定义规则
        let reg = /^[a-zA-Z0-9-_]{6,10}$/;
        let msg = username.nextElementSibling;
        if (!reg.test(username.value)) {
            msg.innerHTML = '昵称长度为6到10个字符';
            return false;
        }
        msg.innerHTML = '';
        return true;
    };

    // 手机号验证
    let phone = document.querySelector('[name=phone]');
    phone.addEventListener('change', verifyPhone);
    function verifyPhone() {
        let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
        let msg = phone.nextElementSibling;
        if (!reg.test(phone.value)) {
            msg.innerHTML = '请输入正确的手机号';
            return false;
        };
        msg.innerHTML = '';
        return true;
    };

    // 发送验证码
    let code = document.querySelector('.code');
    code.addEventListener('click', function () {
        code.innerHTML = '60秒后重新获取';
        let num = 60;
        let timer = setInterval(function () {
            num--;
            code.innerHTML = `${num}秒后重新获取`;
            if (num < 0) {
                clearInterval(timer);
                code.innerHTML = '重新获取';
            };
        }, 1000);
    });

    // 验证码验证
    let codebtn = document.querySelector('[name=code]');
    codebtn.addEventListener('change', verifyCode);
    function verifyCode() {
        let reg = /^[/d0-9]{6}$/;
        let msg = codebtn.nextElementSibling;
        if (!reg.test(codebtn.value)) {
            msg.innerHTML = '请输入正确的验证码';
            return false;
        };
        msg.innerHTML = '';
        return true;
    };

    // 密码验证
    let password = document.querySelector('[name=password]');
    password.addEventListener('change', verifyPassword);
    function verifyPassword() {
        let reg = /^[0-9a-zA-Z-_]{6,20}$/;
        let msg = password.nextElementSibling;
        if (!reg.test(password.value)) {
            msg.innerHTML = '请设置6到20位字母、数字和下划线组合的密码';
            return false;
        };
        msg.innerHTML = '';
        return true;
    };

    // 再次密码验证
    let confirm = document.querySelector('[name=confirm]');
    confirm.addEventListener('change', verifyConfirm);
    function verifyConfirm() {
        let msg = confirm.nextElementSibling;
        if (confirm.value != password.value) {
            msg.innerHTML = '两次密码不一致';
            return false;
        };
        msg.innerHTML = '';
        return true;
    };

    let icon = document.querySelector('.icon-queren');
    icon.addEventListener('click', function () {
        this.classList.toggle('icon-queren2');
    });

    // 提交时验证
    let form = document.querySelector('.xtx-card');
    form.addEventListener('submit', function (e) {
        if (!verifyName()) e.preventDefault();
        if (!verifyPhone()) e.preventDefault();
        if (!verifyCode()) e.preventDefault();
        if (!verifyPassword()) e.preventDefault();
        if (!verifyConfirm()) e.preventDefault();
        if (!icon.classList.contains('icon-queren2')) {
            alert('请勾选同意协议');
            e.preventDefault();
        };
    });
});